<template>
	<view class="server-place">
		<map id='map' ref='map' v-bind:style="{height: mapH + 'px'}" style="width: 100%;" :latitude="latitude"
			:longitude="longitude" :controls='controls' @regionchange='mapChange'>
		</map>
		<view class="map-tools">

			<!-- <view class="my-location" @tap="toMyLocation">
				<image class="left" :src="myPositionIcon" mode=""></image>
				<view class="right">
					<text class="title">我的位置</text>
					<text class="text">{{address}}</text>
				</view>
			</view> -->

			<view class="start-place">
				<view class="place">
					<text class="title">{{address}}：</text>
					
				</view>
				<view class="tip">{{descText}}</view>
				<button @click="selAddress" class="sure" type="primary">确认选择</button>
			</view>
		</view>
	</view>

</template>

<script>
	const app = getApp()
	var QQMapWX = require('./qqmap-wx-jssdk.min.js')
	var qqmapsdk = new QQMapWX({
		key: 'ZPQBZ-RD7WR-XJ7WM-WOUK2-OZRKF-H3FL5'
	})
	export default {
		props: {
			tipText: {
				type: String,
				default: '选择位置'
			},
			descText: {
				type: String,
				default: '使用当前定位或在地图上标记位置'
			},
			positionIcon: {
				type: String,
				default: '../../static/example/car.png'
			},
			myPositionIcon: {
				type: String,
				default: 'https://s2.ax1x.com/2020/03/10/8CjxSJ.png'
			}
		},
		data() {
			return {
				mapH: 0, // 地图高度，可在initMapH()中设置高度
				mapW: 0, // 屏幕宽度
				longitude: 0, // 初始经度
				latitude: 0, // 初始纬度
				myAddress: '', // 初始地址信息
				address: '',
				addressObj: { // 地图选点信息
					longitude: '',
					latitude: '',
					address: '请选择集合地点'
				},
				templongitude: 0,
				templatitude: 0,
				controls: [], // 地图中心点图标, 可更换iconPath, 详情见官方文档关于map组件的介绍

			};
		},
		created() {
			this.getLocation()
		},
		mounted() {
			this.initMapH()
			this.initPositionIcon()
			// this.getFare()
		},
		methods: {
			selAddress(){
				console.log(this.templongitude,this.templatitude);
				let data={
					longitude:this.templongitude,
					latitude:this.templatitude,
					address:this.address
				}
				this.$emit('seladdress',data)
			},
			getFare() {
				let option = {
					to: {
						latitude: 30.277105791688065,
						longitude: 120.01500445926133
					},
					sig: 'ZPQBZ-RD7WR-XJ7WM-WOUK2-OZRKF-H3FL5',
					driving: {
						policy: 'TRIP',
						accuracy: 10
					},
					complete: res => {
						console.log("打车费用是", res.result.routes[0].taxi_fare.fare);
						console.log("距离是：", res.result.routes[0].distance);
					}
				}
				qqmapsdk.direction(option)
			},
			getAdress({latitude,longitude}) {
				let option = {
					location: {
						latitude: latitude,
						longitude: longitude
					},
					sig: 'ZPQBZ-RD7WR-XJ7WM-WOUK2-OZRKF-H3FL5',
					success : res => {
						// console.log("地址是：" , res.result.formatted_addresses.recommend);
						this.address = res.result.formatted_addresses.recommend;
					}
				}
				qqmapsdk.reverseGeocoder(option)
			},
			// 初始化地图中心位置的定位图片
			initPositionIcon() {
				setTimeout(() => {
					var controls = {
						id: '1',
						iconPath: this.positionIcon,
						position: {
							left: this.mapW / 2 - 10,
							// #ifdef APP-PLUS
							top: this.mapH / 2 - 100,
							// #endif
							// #ifndef APP-PLUS
							top: this.mapH / 2,
							// #endif
							width: 30,
							height: 30,
						},
						clickable: false
					};
					this.controls.push(controls);
				}, 100)
			},
			// 查询现在的位置
			getLocation() {
				let this_ = this
				uni.getLocation({
					type: 'gcj02', // 返回国测局坐标
					geocode: true,
					success: function(res) { 
						this_.initMap(res)
					},
					fail: function(e) {
						uni.showToast({
							icon: 'none',
							title: '获取地址失败, 请检查是否开启定位权限~~'
						})
					}
				})
			},

			// 初始化我的位置
			async initMap(res) {
				this.longitude = res.longitude;
				this.latitude = res.latitude;
			},

			// 地图选择位置后 查询地点名称
			async checkMap(res) {
				this.getAdress(res)
				console.log('当前位置:' + res.latitude + '|' + res.longitude);
				this.templongitude = res.longitude;
				this.templatitude = res.latitude;
			},

			// 监听地图位置变化
			mapChange(e) {
				let that = this
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					if (e.type == 'regionchange' || e.type == 'end') {
						that.mapCtx = uni.createMapContext('map', this)
						that.mapCtx.getCenterLocation({
							success: res => {
								this.checkMap(res)
							},
							fail: err => {
								console.log(err);
							}
						})
					}
				}, 200)
			},
			// 计算地图的高度
			initMapH() {
				// #ifdef APP-PLUS
				this.mapW = uni.getSystemInfoSync().windowWidth
				this.mapH = uni.getSystemInfoSync().windowHeight - 310;
				// #endif
			},
			// 移动到我的位置
			toMyLocation() {
				this.getLocation()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.server-place {
		position: fixed;
		left: 0;
		top: 0;
		height: 85%;
		width: 100%;
		background: #ffffff;
		z-index: 999;

		.map-tools {
			position: fixed;
			width: 100%;
			bottom: 30rpx;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.my-location {
				width: 90%;
				margin: 0 auto;
				height: 120rpx;
				box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
				background: #fff;
				border-radius: 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				overflow: hidden;

				.left {
					background: #3384ff;
					// flex: 20%;
					width: 120rpx;
					height: 100%;
				}

				.right {
					margin-left: 20rpx;
					color: #111;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;

					.title {
						font-size: 28rpx;
						font-weight: bold;
					}

					.text {
						font-size: 26rpx;
						width: 500rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: #3384FF;
						margin-top: 10rpx;
					}
				}
			}

			.start-place {
				width: 85%;
				margin: 0 auto;
				margin: 0 auto;
				margin-top: 20rpx;
				box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;

				.place {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.title {
						font-size: 28rpx;
						font-weight: bold;
						color: #111;
					}

					.text {
						font-size: 28rpx;
						color: #3384FF;
						font-weight: bold;
						width: 450rpx;
						display: inline-block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.tip {
					font-size: 22rpx;
					color: #666;
					margin-top: 15rpx;
				}

				.sure {
					margin-top: 15rpx;
					color: #FFFFFF;
					background: #212121;
					font-weight: blod;
					font-size: 32rpx;
				}

			}
		}
	}
</style>
